<template>
  <div class="roll-item">
    <div class="roll-item-box">
      <div class="item-top">
        <div class="item-top-left">{{ value.mobile_num }}</div>
        <div class="item-top-right">{{ value.insert_time }}</div>
      </div>
      <div class="item-bottom">
        <div class="item-bottom-left">{{ value.handler_result }}</div>
        <div class="item-bottom-right" 
        :class="[getStatuClass(value.status)]">
          <span>{{ getStatusText(value.status)}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      value: {
      }
    },
    methods:  {
      getStatusText (status) {
        if (status === 'CRT#') {
          return '待处理'
        } else if (status === 'OK##') {
          return '导入成功'
        } else if (status === 'FLS#') {
          return '导入失败'
        }
      },
      getStatuClass (status) {
        if (status === 'CRT#') {
          return 'info'
        } else if (status === 'OK##') {
          return 'success'
        } else if (status === 'FLS#') {
          return 'error'
        }
      }
    }
  }
</script>
<style lang="less">
.roll-item:not(:last-child) {
  .roll-item-box {
    border-bottom: 1px solid #f2f2f2;
  }
}

.roll-item {
  padding: 0 6px;
  background: white;

  .item-top,.item-bottom {
    overflow: hidden;
    // padding: 
  }

  .roll-item-box {
    padding: 0 4px;
  }
  
  .item-top-left {
    color: #444;
    font-size: 16px;
    float: left;
    padding: 4px 0 0 0;
  }

  .item-top-right {
    color: #cccccc;
    font-size: 12px;
    float: right;
    padding: 4px 0 0 0;
  }

  .item-bottom-left {
    font-size: 12px;
    float: left;
    padding: 0 0 4px 0;
  }

  .item-bottom-right {
    font-size: 12px;
    float: right;
    padding: 0 0 4px 0;
  }

  .info {
    color: #444;
  }
  .success {
    color: green;
  }
  .error {
    color: red;
  }

}
</style>